import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem,SearchBar } from "antd-mobile"
import { connect } from 'dva';
import { Row, Col } from 'antd';
import { handleImg, goToPage,isNull,handleOSS } from "../../utils/helper";
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import MToast from '../../components/Util/MToast';
@connect(() => {
  return ({

  })
})
export default class searchPage extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      goodsItem:[],
      value:'',
      loading:true,
    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: "",
        path: location.pathname + location.search
      }
    });

  }
  onChange= (value) => {
    this.setState({ value });
  };
  submit=()=>{
    let {dispatch,location} = this.props;
    let {value,loading} = this.state;
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/all?_c=app_search_goods_list",
          params: [
            {
              key: "keyword",
              value: value
            },
          ],
          _c: "app_search_goods_list"
        },
        callback: (result) => {
          let { data } = result;
          let {loading} = this.state;
          this.setState({
            goodsItem:data,
            loading:false,
          })

          console.log(data)

        }
      }
    });
  }
  handleDetail=(e,i)=>{
    let {dispatch} = this.props;
    goToPage({ dispatch, config: { url: "/goodsDetail?id="+i.id+"&store_id="+i.store_id }, isReplace: false })
  }
  handleAdd=(e,i)=>{
    // console.log(i);
    let {dispatch} = this.props;
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "cart/add",
          params: [
            {
              key: "goods_id",
              value: i.id
            },
            {
              key: "goods_name",
              value: i.goods_name
            },
            {
              key: "img_url",
              value: i.img_url
            },
            {
              key: "price",
              value: i.price
            },
            {
              key: "quantity",
              value: 1
            }
          ]
        },
        callback: (result) => {
          let { data } = result;
          console.log(data)
          MToast.info(T("È stato aggiunto un nuovo articolo al tuo carrello.（商品已加入到购物车）",3, null, false));

        }
      }
    })
  }
  renderList() {
    let {goodsItem,loading} = this.state;

    if (!goodsItem || goodsItem.length == 0) {
      return (
        <div style={{ padding: "40px 0", textAlign: "center", fontSize: "20px", color: "#555" }}>
          {T("No products(暂无商品)")}
        </div>
      )
    }
    else {
      let contents = [];
      if (loading) {
        return (
          <div className="normal">
            <ActivityIndicator toast text="正在加载" animating={true} />
          </div>
        )
      }else{
        return (
          <div>
            {/*<div style={{ padding: "10px", fontSize: "16px", borderBottom: "1px solid #ddd", wordBreak: "break-all", lineHeight: 2 }} className="ellipsis1">*/}
            {/*{localStorage[MI_APP_CODE + "name"]}*/}
            {/*</div>*/}
            <div style={{margin:'0.58em 0 104px'}}>
              <div style={{marginBottom : '40px', padding : '0px 0px'}} className="box">

                {
                  goodsItem.map((i,k) =>{
                    return (

                      <div  key={k} style={{
                        background:'#fff',
                        borderRadius:'10px',
                        fontWeight : 'bold',
                        padding : '5%'
                      }} className="item">
                        <div onClick={(e) =>{this.handleDetail(e, i)}}>
                          <img src={handleOSS(i.img_url)} style={{width : '100%', height : '100%'}}/>
                          <p className="ellipsis2" style={{
                            margin : '12px 0px 0px',
                            textAlign : 'left',
                            color : '#595867',
                            fontSize : '13px',
                            height : '35px'
                          }}>{i.goods_name}</p>

                        </div>
                        <div style={{overflow : 'hidden', margin : '8px 0px 0px'}}>
                          <div style={{
                            float : 'left',
                            color : '#F09600',
                            fontSize : '15px',
                            marginTop : '5px'
                          }}>€{i.price}</div>
                          <div style={{
                            float : 'right',
                            width : '34px',
                            height : '34px'
                          }} onClick={(e) =>{this.handleAdd(e, i) }}>
                            <img src="image/cart1.png" style={{width : '32px', height : '32px'}}/>
                          </div>
                        </div>

                        {/*<Button type="primary" size="small" inline style={{marginBottom:'1em'}} onClick={(e) => {this.handleAdd(e,i) }}>+ADD</Button>*/}
                      </div>

                    )
                  })
                }
              </div>
            </div>
          </div>
        )
      }

    }
  }
  render(){
    let {dispatch} = this.props;
    let {goodsItem,loading} = this.state;

    return(
      <div style={{height:"100%",position: 'relative',background:'rgb(249, 247, 247)'}}>
        <Row style={{padding:'16% 5% 0%'}}>
          <Col span={20}><SearchBar
            placeholder="Search"
            maxLength={200}
            onChange={this.onChange}
            onSubmit={value => this.submit(value)}
          /></Col>
          <Col span={4} style={{textAlign:'right',lineHeight:'44px'}}><img src="image/cart.png" style={{width:'26px',height:'26px'}} onClick={()=>{goToPage({ dispatch, config: { url: "/goodcart" }})}}/></Col>

        </Row>
        {this.renderList()}
      </div>
    )
  }
}
